<template>
  <div class="container">
    <!-- <h2>设备类型</h2> -->
    <div class="search">
      <el-form :inline="true" class="demo-form-inline" size="medium">
        <el-form-item label="型号搜素：">
          <el-input v-model="queryObj.name" placeholder="请输入型号名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" class="searchBtn" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="content">
      <div class="btns">
        <el-button type="primary" icon="el-icon-circle-plus-outline" class="left" @click="openDialog('add')">新建</el-button>
      </div>

      <!-- 表格区域 -->
      <el-table
        ref="multipleTable"
        highlight-current-row
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :header-cell-style="{
          backgroundColor: 'rgb(243, 246, 251)',
          fontWeight: 500,
          padding: '9px 0'
        }"
      >
        <el-table-column
          label="序号"
          width="100"
          prop="typeId"
          type="index"
        />
        <el-table-column
          label="型号名称"
          width="300"
          prop="name"
        />
        <el-table-column
          label="型号编码"
          width="300"
          prop="model"
        />
        <el-table-column
          label="设备图片"
          width="200"
        >
          <template #default="{row}">
            <el-avatar size="small" :src="row.image" />
          <!-- <span>{{ row.type.image }}</span> -->
          </template>
        </el-table-column>
        <el-table-column
          label="货道行"
          width="200"
          prop="vmRow"
        />
        <el-table-column
          label="货道列"
          width="200"
          prop="vmCol"
        />
        <el-table-column
          label="设备容量"
          width="200"
          prop="channelMaxCapacity"
        />
        <el-table-column
          label="操作"
          width="150"
        >
          <template #default="{row}">
            <el-button type="text" @click="openDialog('edit',row)">修改</el-button>
            <el-button type="text" style="color:red" @click="del(row.typeId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格区域 -->

      <!-- 分页区域 -->
      <el-pagination
        :current-page="queryObj.pageIndex"
        :page-size="queryObj.pageSize"
        popper-class="selectPagesize"
        layout="slot, prev,  next"
        background
        prev-text="上一页"
        next-text="下一页"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <template>
          <span class="pagnation">共{{ totalCount }}条记录 第{{ queryObj.pageIndex }}/{{ totalPage }}页</span>
        </template>
      </el-pagination>
      <!-- 分页区域 -->

      <!-- 新增或修改设备类型弹窗 -->
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="45%"
        @close="close"
      >
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="型号名称：">
            <el-input
              v-model="form.name"
              maxlength="10"
              show-word-limit
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="型号编码：">
            <el-input
              v-model="form.model"
              maxlength="15"
              show-word-limit
              placeholder="请输入（限制数字、字母、中划线、下划线）"
            />
          </el-form-item>
          <el-form-item label="货道行数：">
            <template>
              <el-input-number v-model="form.vmRow" controls-position="right" :min="1" :max="10" placeholder="请输入" />
            </template>
          </el-form-item>
          <el-form-item label="货道列数：">
            <template>
              <el-input-number v-model="form.vmCol" controls-position="right" :min="1" :max="10" placeholder="请输入" />
            </template>
          </el-form-item>
          <el-form-item label="货道容量：">
            <template>
              <el-input-number v-model="form.channelMaxCapacity" controls-position="right" :min="1" :max="10" placeholder="请输入" />
            </template>
          </el-form-item>
          <el-form-item label="设备图片：">
            <UploadImage v-model="form.image" />
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 新增或修改设备类型弹窗 -->

    </div>
  </div>
</template>

<script>
import { list, delType, addType, editType } from '@/api/equipments/type'
import UploadImage from './components/UploadImage.vue'

export default {
  name: 'EquipmentType',
  components: {
    UploadImage
  },

  data() {
    return {
      tableData: [],
      queryObj: {
        pageIndex: 1,
        pageSize: 10,
        name: ''
      },
      totalCount: null,
      totalPage: '',
      title: '新增设备类型',
      dialogVisible: false,
      form: {
        vmRow: null,
        vmCol: null,
        name: '',
        channelMaxCapacity: null,
        model: '',
        image: ''
      }
    }
  },

  mounted() {
    this.initTable()
  },

  methods: {
    async initTable() {
      const data = await list(this.queryObj)
      this.tableData = data.currentPageRecords
      this.totalCount = data.totalCount
      this.totalPage = data.totalPage
      console.log(data)
    },
    // 当每页条数数据改变时触发
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      // 修改本地传参发请求的每页条数数据，以便发请求
      this.queryObj.pageSize = val
      // 改变每页数据条数时，将当前页初始化为1，在请求数据
      this.queryObj.pageIndex = 1
      this.initTable()
    },
    // 当当前页页数改变时触发
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      // 修改本地传参发请求的当前页数据，以便发请求
      this.queryObj.pageIndex = val
      this.initTable()
    },
    // 搜素功能
    search() {
      this.initTable()
    },
    // 删除功能
    async del(id) {
      await delType(id)
      this.$message.success('删除成功')
      this.initTable()
    },
    // 头像上传功能
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 打开新增或修改弹窗
    openDialog(type, row) {
      if (type === 'edit') {
        this.title = '修改设备类型'
        // console.log(row)
        this.form = row
      }
      this.dialogVisible = true
    },
    // 提交新增或修改
    async submit() {
      if (this.title === '新增设备类型') {
        await addType(this.form)
        // console.log(data)
        this.$message.success('新增成功')
        this.initTable()
      } else {
        // console.log(data)
        try {
          await editType(this.form)
          this.$message.success('修改成功')
        } catch (error) {
          this.$message.error('此为演示系统不支持此操作')
        }
        this.initTable()
      }
      this.dialogVisible = false
    },
    // 关闭弹窗
    close() {
      this.form = {
        vmRow: null,
        vmCol: null,
        name: '',
        channelMaxCapacity: null,
        model: '',
        image: ''
      }
      this.title = '新增设备类型'
    }

  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table {
 td {
  padding: 2px 0;
  border: none;
 }
 // &::before {
 //  height: 0;
 // }
}
.container{
  padding: 20px;
  .search{
  display: flex;
  align-items: center;
  height: 64px;
  margin-bottom: 20px;
  padding-left: 17px;
  background-color: #fff;
  padding-top: 23px;
  .searchBtn{
    background-color: #5373e0;
  }
}

  .btns{
    margin-bottom: 20px;
   .left{
   background:linear-gradient(135deg,#ff9743,#ff5e20)!important;
    border:none ;
    margin-left: 10px;
   }
   .right{
    background-color: #fbf4f0;
    border:none ;
    color: #655b56;
   }
  }
  .el-pagination{
    position: relative;
   display: flex;
   justify-content: end;
   padding: 32px 16px;
   height: 32px;
   align-items: center;
   ::v-deep .btn-prev{
    width: 70px;
    height: 32px;
    background-color: #d5ddf8;
   }
   ::v-deep .btn-next{
    width: 70px;
    height: 32px;
    background-color: #d5ddf8;
   }
   .pagnation{
    position: absolute;
    left: 0;
    font-size: 16px!important;
    color: #dbdfe5!important;
    font-weight: normal;
   }

   .strategyDialog{
    ::v-deep .strategyForm{
      // padding:  0 20px;
      color: #666;
      font-weight: normal;
    }
     .footer {
       text-align: center !important;
      }
   }
   ::v-deep .editDialog-footer{
    display: flex;
    justify-content: center;
   }

  }
   ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 84px;
    height: 84px;
    line-height: 84px;
    text-align: center;
  }
  .avatar {
    width: 84px;
    height: 84px;
    display: block;
  }
}
</style>
